<template>
 <div>
 <NavBar/>

   <van-search v-model="value"
               placeholder="请输入搜索关键词"
               input-align="center"
               show-action
               type="text"
               shape="round"
               background="#4fc08d"
               @search="onSearch"
               @cancel="onCancel"
               @keyup.enter="search"

   />

  <van-pull-refresh v-model="refreshing"
                    success-text="刷新成功" @refresh="onRefresh">



  <div>
   <van-row justify="center">
    <van-col span="8" v-for="item in List" >
     <div>
      <van-image
              width="10rem"
              height="10rem"
              fit="cover"
              :src="item.url"
              @click="get(item.id),send(item.url)"
      />
      <h3 @click="get(item.id),send(item.url)">{{item.title}}</h3>
     </div>

    </van-col >

   </van-row>
  </div>

<!--   <h1>欢迎登录到主页</h1>-->
  </van-pull-refresh>
 </div>



</template>

<script>

import NavBar from "../components/NavBar";


export default {
 name: 'Home',//首页
 components: {
  NavBar,
 },
 data(){
  return{
   value: '',
   videoList:[],
   List:[],
   refreshing:false,
  }
 },
 //这里只要页面加载就会执行的方法
 mounted: function(){
  this.get();
 },
 methods:{
  onLoad() {
   setTimeout(() => {
    if (this.refreshing) {
     var that=this;
     this.axios.get("http://localhost:8080//hy/videoController/watchVideo.do").then(function (response) {
      console.log(response);
      that.list= response.data.data;
     },function(err) {

     })
     this.refreshing = false;
    }
    /*
                  for (let i = 0; i < 10; i++) {
                      this.list.push(this.list.length + 1);
                  }*/
    this.loading = false;

    if (this.list.length >= 40) {
     this.finished = true;
    }
   }, 1000);
  },
  onRefresh() {
   // 清空列表数据
   this.finished = false;

   // 重新加载数据
   // 将 loading 设置为 true，表示处于加载状态
   this.loading = true;
   this.onLoad();
  },
  send:function(sendurl){
       this.$router.push({
        path:'PlayVideo',
        query:{
         sendurl:sendurl
        }
       })
  },
    search:function () {
     var that=this;
      this.axios.get("http://localhost:8080//hy/videoController/VideoLike.do?title="
              + this.value).then(function (response) {
       console.log(response )
       that.List= response.data.data;
      },function(err) {

     })

    },
    get:function () {
     var that = this
     this.axios.get("http://localhost:8080//hy/videoController/watchVideo.do")
             .then(function (response) {
          console.log(response)
              /*  console.log(response.data.songs[0].al.picUrl)*/
            /*   that.imgUrl = response.data.songs[0].al.picUrl;*/
              console.log(response.data.data[0].url);
              console.log(response.data);
              that.List = response.data.data;
             },function (err) {

             });
    },
 },




}

</script>

